<template>
    <div class="task_detail">
        <van-nav-bar title="任务详情" left-text="返回" left-arrow @click-left="onClickLeft"/>
        <div class="headimg">
            <!-- <img src="" alt=""> -->
        </div>
        <!-- 公司 -->
        <div class="company">
            <img class="headimg" :src="taskInfo.headimgurl" alt="">
            <div class="box">
                <div>
                    <h4>{{taskInfo.nickname}}</h4>
                    <div>
                        <span>已认证</span>
                        <span>企业用户</span>
                    </div>
                </div>
                <i class="zx-icon">&#xe6be;</i>
            </div>
        </div>
        <!-- 头部标题 -->
        <div class="top_title">
            <h3><strong>任务标题 : </strong>{{taskInfo.task_title}}</h3>
            <div class="tag">
                <span>{{taskInfo.tag}}</span>
                <span>{{taskInfo.createdAt}}</span>
            </div>
            <div class="price">
                <strong style="font-size: 16px;color:#333;">预算资金 : &nbsp;</strong>
                <i>¥&nbsp;</i>
                <span>{{taskInfo.task_cash | formatNum}}</span>
            </div>
            <div class="look">
                <!--5000人 看过-->
            </div>
        </div>

        <!-- 任务描述 -->
        <div class="task_des">
            <div class="flex">
                <h5>任务描述</h5>
                <div>
                    {{taskInfo.task_des}}
                </div>
            </div>
            <div class="flex">
                <h5>任务要求</h5>
                <div>
                    {{taskInfo.task_require}}
                </div>
            </div>
            <div class="flex">
                <!-- 任务周期 -->
                <h5>任务周期</h5>
                <div>
                    {{taskInfo.task_cycle}}
                </div>
            </div>
            <div class="flex">
                <!-- 备注说明-->
                <h5>备注说明</h5>
                <div>
                    {{taskInfo.task_remarks}}
                </div>
            </div>
            <div class="flex">
                <!-- 地址 -->
                <h5>任务地址</h5>
                <div>
                    {{taskInfo.task_addr + taskInfo.task_addr2}}
                </div>
            </div>
            <div class="flex">
                <!-- 地址 -->
                <h5>参考图片</h5>
                <div class="imgs">
                    <img @click="imgfn" :src="imgs.img1" alt="">
                    <img @click="imgfn" style="margin-left: 10px;margin-right: 10px;" :src="imgs.img2" alt="">
                    <img @click="imgfn" :src="imgs.img3" alt="">
                </div>
            </div>
        </div>

        <!-- 提示文字 -->
        <div class="tips">
            <div>
                <p>温馨提示：刷单类兼职请勿相信，若有发现请及时向知行兼职举报。</p>
            </div>
        </div>
        <!-- 留言 -->
        <!--   <div class="task_des remarks">
               <h5><span>最新留言</span><i @click="remarks" class="zx-icon">&#xe6ce;</i></h5>
               <div>
                    <div class="remark-box">
                        <img src="/img/person2.jpg" alt="">
                        <div class="right">
                            <strong>
                                <span>风中的蝴蝶</span>
                                <br/>
                                <span>2018-09-30 21:24:41</span>
                            </strong>
                            <div>
                                <p>随便说点啥啦随便说点啥啦随便说点啥啦随便说点啥啦</p>
                                <button @click="remarks2" class="reMarks">回复</button>
                            </div>
                        </div>
                    </div>
                   <div class="remark-box">
                       <img src="/img/person2.jpg" alt="">
                       <div class="right">
                           <strong>
                               <span>风中的蝴蝶</span>
                               <br/>
                               <span>2018-09-30 21:24:41</span>
                           </strong>
                           <div>
                               <p><i>回复<em>&nbsp;吃瓜的群众</em>&nbsp;：</i>随便说点啥啦随便说点啥啦随便说点啥啦随便说点啥啦</p>
                               <button @click="remarks2" class="reMarks">回复</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>-->
        <div class="mask">
            <div class="box">
                <van-button @click="btnHandle(taskInfo.status,taskInfo.task_id)" size="normal"><i class="zx-icon">&#xe714;&nbsp;</i>报名
                </van-button>
                <van-button @click="concact" size="normal"><i class="zx-icon">&#xe647;&nbsp;</i>咨询</van-button>
                <van-button @click="share" size="normal"><i class="zx-icon">&#xe65d;&nbsp;</i>转发</van-button>
            </div>
        </div>

        <div class="mark-box-first">
            <van-popup v-model="marskBoxFirst" position="bottom">
                <div class="div">
                    <button @click="remarks">取消</button>
                    <button>确定</button>
                </div>
                <textarea :placeholder="rmksText" rows="15"
                          style="width: calc(100% - 20px);overflow-y:hidden;resize: none;outline: none;">

                 </textarea>
            </van-popup>

        </div>


        <van-dialog
                v-model="show"
                show-cancel-button
                title="任务报名"
                :before-close="beforeClose"
        >
            <van-field
                    v-model="sign_cash"
                    label="报价（元）"
                    placeholder="请输入竞标议价"
                    onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
            />
        </van-dialog>
    </div>
</template>

<script>
    import {Button, Popup, Field} from 'vant';
    import { ImagePreview } from 'vant';
    import Vue from 'vue';

    Vue.use(Button).use(Popup).use(Field).use(ImagePreview);
    export default {
        data() {
            return {
                imgs:'',
                task_id: '',
                status: '',
                sign_cash: '',
                show: false,
                taskInfo: {},
                marskBoxFirst: false,
                rmksText: '',
            }
        },
        created() {
            this.init()
            document.body.style.backgroundColor = 'rgb(239, 243, 246)'
        },
        methods: {
            imgfn(){
                let arr = [];
                if(this.imgs.img1){
                    arr.push(this.imgs.img1)
                };
                if(this.imgs.img2){
                    arr.push(this.imgs.img2)
                };
                if(this.imgs.img3){
                    arr.push(this.imgs.img3)
                };
                ImagePreview(arr)
            },

            beforeClose(action, done) {

                if (action === 'confirm') {
                    console.log(this.status)
                    console.log(this.task_id)
                    console.log(this.sign_cash)

                    if (!this.sign_cash) {
                        done()
                        this.$dialog.alert({message: '请先输入议价金额'}).then(() => {
                            this.show = true;
                        })

                    } else {
                        let status=this.status;
                        if (status < 4 && status !== 2) {

                            this.$post('/api/task/sign', {
                                task_id: this.task_id,
                                sign_cash:this.sign_cash,
                                uid: JSON.parse(localStorage.getItem('user')).uid
                            }).then(res => {
                                console.log(res.data.err_code)
                                if (res.data.err_code == 0) {

                                    this.$dialog.alert({
                                        message: '恭喜你,报名成功了'
                                    }).then(() => {
                                        this.$router.replace({name: 'job'})

                                    }).catch(() => {
                                        // on cancel
                                        console.log('取消')
                                    });
                                } else {
                                    this.$dialog.alert({
                                        message: res.data.err_msg
                                    }).then(() => {
                                        this.$router.replace({name: 'index'})

                                    }).catch(() => {
                                        // on cancel
                                        console.log('取消')
                                    });
                                }
                            }).catch(err => {
                                alert(err.data.err_msg)
                                console.log(err)
                            })
                        }else{
                            alert(this.status)
                        }
                    }


                } else {
                    this.$dialog.alert({message: "您已取消报名"})
                    done();
                }
            },
            share() {
                this.$dialog.alert(({title: '转发分享', message: '请在微信内，点击微信到右上角，选择分享到朋友圈或分享给朋友',closeOnClickOverlay:true}))
            },
            concact() {
                this.$dialog.alert({title: '咨询', message: '关注“知行互助”咨询客服',closeOnClickOverlay:true})
            },
            btnHandle(status, task_id) {
                if(!localStorage.getItem('user')){
                    this.$dialog.confirm({
                        title: '温馨提示',
                        message: '您尚未登录，请先登录再继续操作下一步!',
                        confirmButtonText:'去登录',
                        cancelButtonText:'取消',
                        closeOnClickOverlay:true
                    }).then(()=>{
                        this.$router.push({name:'home'})
                    }).catch(()=>{

                    })
                    return;

                };
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '在接任务之前，先完善自己的个人资料，突出自己的技能和优势，更容易获得雇主的青睐哦~',
                    confirmButtonText:'去完善资料',
                    cancelButtonText:'继续报名',
                    closeOnClickOverlay:true
                }).then(() => {
                    this.$router.push({name:'user_info_edit',query:{uid:JSON.parse(localStorage.getItem('user')).uid}})

                }).catch(() => {
                    this.show = !this.show;
                    this.task_id = task_id;
                    this.status = status;
                });


            },
            init() {
                this.$post('/api/task/detail', {task_id: this.$route.query.task_id}).then(res => {
                    if (res.data.err_code == 0) {
                        console.log(res.data.data)
                        this.taskInfo = res.data.data.task;
                        this.imgs = res.data.data.imgs;
                    } else {
                        this.$toast({message: res.data.err_msg})
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            remarks() {
                this.rmksText = `有何高见,展开讲讲`
                this.marskBoxFirst = !this.marskBoxFirst;
            },
            remarks2() {
                this.rmksText = `回复:xxxx`
                this.marskBoxFirst = !this.marskBoxFirst;
            },
            onClickLeft() {
                history.back()
            }
        }
    }
</script>
<style lang="less" scoped>
    .flex {
        margin-bottom: 10px;
        display: flex;
        h5 {
            min-width: 5em;
        }
    }

    @import url('../../public/css/task_detail.less');
</style>
